<template>
  <div class="add-container">
    <div class="add-container--heard">
      <div class="heard--service">
        <img src="../assets/kefu.png" alt="">
      </div>
      <div class="heard--search">
        <img src="../assets/sousuo.png" alt="">
        <input type="text" autocomplete="off" placeholder="保暖内衣" @click="HotSearchs">
      </div>
      <div class="heard--Shopping">
        <img src="../assets/gouwuche.png" alt="" @click="cart">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "shopping",
  methods: {
    cart(){
      this.$apis.commodity()
        .then(data => {
          this.$router.push({name: 'commodity'});
          console.log(data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    HotSearchs(){
      this.$router.push({name: 'HotSearch'});
    }
  },
}
</script>

<style scoped>
.add-container{
  width: 100vw;
  height: 1.1rem;
}
.add-container--heard{
  width: 100vw;
  height: 1.1rem;
  border-bottom: silver 1px solid;
  z-index: 9;
  top: 0;
  position: fixed;
  background: white;
}
  .heard--service{
    display: inline-block;
    width: 1.3066rem;
    height: 1.1rem;
  }
  .heard--service>img{
    width: .6rem;
    height: .6rem;
    position: relative;
    left: .4rem;
    top: .3rem;
  }
  .heard--search{
    display: inline-block;
    width: 7.45333rem;
    height: .8533rem;
    background: #f5f5f5;
    border-radius: .2rem;
  }
  .heard--search>img{
    display: inline-block;
    width: .4366rem;
    height: .4366rem;
    position: relative;
    top: .19rem;
    left: .2rem;
  }
  .heard--search>input{
    display: inline-block;
    position: relative;
    width: 5rem;
    height: .4366rem;
    left: .5rem;
    top: .1rem;
    font-size: .35rem;
    border: none;
    outline: none;
    background: #f5f5f5;
  }
  .heard--Shopping{
    display: inline-block;
    width: 1.2rem;
    height: 1.1rem;
  }
  .heard--Shopping>img{
    width: .6rem;
    height: .6rem;
    position: relative;
    left: .4rem;
    top: .3rem;
  }
</style>
